<template>
  <div class="footer">
    <div class="fot">
      <div class="left">
        <span class="iconfont">&#xe64f;</span>
        <span class="typeface">快捷操作</span>
      </div>
      <el-checkbox-group v-model="checkList" size="small">
        <el-checkbox :label="str1" />
        <el-checkbox label="当前页面" />
        <el-checkbox label="筛选结果" />
        <el-checkbox :label="str2" />
      </el-checkbox-group>
      <p>
        已选中&nbsp;{{ props.num1 }}&nbsp;条,共&nbsp;{{
          props.num2
        }}&nbsp;条数据
      </p>
    </div>

    <div class="body">
      <!-- 按钮 -->
      <div class="btn">
        <el-button color="rgb(23,28,73)" @click="exportTab">{{
          props.btnStr
        }}</el-button>
        <el-button color="rgb(23,28,73)" @click="pageHome">首页</el-button>
        <el-button color="rgb(23,28,73)" @click="pagePrev">上一页</el-button>
        <el-button szie="10" @click.stop="pageShow">
          <span class="pageNum">{{ pageNum }}</span>
        </el-button>
        <el-button color="rgb(23,28,73)" @click="pageNext">下一页</el-button>
      </div>

      <!-- 分页器 -->
      <transition
        name="animate__animated animate__bounce"
        enter-active-class="animate__bounceInRight"
        leave-active-class="animate__bounceOutRight"
      >
        <div class="pagination" v-show="isPageShow">
          <el-pagination
            v-model:current-page="pageNum"
            background
            layout="pager,jumper"
            :total="props.total"
            :page-size="props.pageSizes"
            @current-change="currentChange"
          />
        </div>
      </transition>
    </div>
  </div>
</template>

<script setup>
import { notiFication } from "../utils/message.js";
import { ref, onMounted } from "vue";

// 引入动画库
import "animate.css";

// 第一个参数-首页，参数2下一页，参数参---上一页
const emit = defineEmits([
  "myEvent",
  "myEvent2",
  "myEvent3",
  "changePage",
  "toExcel",
]);

/**
 * exportTab
 * 点击一键导出 判断是否导出成功
 */
const exportTab = () => {
  notiFication(props.btnStr, "success");
  emit("toExcel");
};

// 多选框存储数值
const checkList = ref([]);

// 向父组件传值
const props = defineProps({
  btnStr: {
    type: String,
    default: "一键导出",
  },
  str1: {
    type: String,
    default: "今日售后",
  },
  str2: {
    type: String,
    default: "所有订单",
  },
  num1: {
    type: Number,
    default: 45,
  },
  num2: {
    type: Number,
    default: 87153,
  },
  pageNum: {
    type: Number,
    default: 1,
  },
  total: {
    type: Number,
    default: 100,
  },
  pageSizes: {
    type: Number,
    default: 5,
  },
});

// ------------分页器

// 页码 初始值为1
const pageNum = ref(1);

// 每页显示数据条数
// const pageSizes = ref(5);

// 数据总条数
// const total = ref(10);
// 改变页码
function currentChange(page) {
  // console.log(page);
  emit("changePage", pageNum.value);
}

// 首页
function pageHome() {
  pageNum.value = 1;
  emit("myEvent", pageNum.value);
}

// 上一页
function pagePrev() {
  pageNum.value === 1 ? 1 : pageNum.value--;
  if (pageNum.value === 1) {
    notiFication("已经到第一页了", "error");
  }
  emit("myEvent3", pageNum.value);
}

// 下一页
function pageNext() {
  if (pageNum.value === Math.ceil(props.total / props.pageSizes)) {
    notiFication("已经是最后一页了", "error");
  } else {
    pageNum.value = pageNum.value + 1;
  }
  emit("myEvent2", pageNum.value);
}

// 分页器显示控制器
const isPageShow = ref(false);

// 点击页码按钮时让分页器显示
function pageShow(e) {
  e.preventDefault();
  isPageShow.value = true;
}

// 点击其他地方让分页器隐藏
document.body.addEventListener("click", () => {
  isPageShow.value = false;
});

// 改变go to 为 G
onMounted(() => {
  // 给GoTo按钮添加点击事件 ---让分页器隐藏
  const pageGoTo = document.querySelector(".el-pagination__goto");
  pageGoTo.innerHTML = "G";
  pageGoTo.addEventListener("click", () => {
    isPageShow.value = false;
  });

  // 获取页码输入框dome元素
  const jumpWarpper = document.querySelector(
    ".el-pagination__jump .el-input__wrapper"
  );

  // 阻止页码输入框的点击事件冒泡
  jumpWarpper.addEventListener("click", (e) => {
    e.stopPropagation();
  });

  // 在页码器输入页码后回车让页码器隐藏
  jumpWarpper.addEventListener("keydown", (event) => {
    if (event.keyCode === 13) {
      isPageShow.value = false;
    }
  });
});

// 向外暴露组件属性
defineExpose({ pageNum });
</script>

<style lang="less" scoped>
.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 40px 0;
  .fot {
    width: 840px;
    height: 67px;
    border-radius: 5px;
    box-shadow: 0px 0px 20px rgb(0 0 0 / 20%);
    display: flex;
    justify-content: space-around;
    align-items: center;
    .left {
      display: flex;
      align-items: center;
      .iconfont {
        font-size: 24px;
        margin-left: 10px;
      }
      .typeface {
        font-size: 12px;
        margin-left: 10px;
      }
    }
    p {
      font-size: 14px;
      font-weight: bold;
    }
  }
  .body {
    position: relative;
    width: 350px;
    .btn {
      display: flex;
      width: 346px;
      justify-content: center;
      align-items: center;
      .el-button {
        font-weight: bold;
        padding: 30px 10px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
          0 6px 20px 0 rgba(0, 0, 0, 0.19);
      }
      .pageNum {
        font-weight: 700;
        font-size: 16px;
        border-bottom: 1px solid rgb(23, 28, 73);
      }
    }
    .pagination {
      background-color: white;
      width: 346px;
      height: 66px;
      border-radius: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      top: 0px;
      left: 0px;
      :deep(.el-pagination) {
        --el-pagination-button-bg-color: none;
        --el-pagination-button-width: 16px;
        // --el-pagination-border-radius: none:
        --el-pagination-border-radius: 0px;
        --el-pagination-button-height: auto;
        .el-pager li {
          padding: 0;
          width: 10px;
        }
        li.is-active {
          color: black;
          background-color: transparent;
          font-weight: 400;
          border-bottom: 1px solid black;
        }
      }
      :deep(.el-pagination__jump) {
        margin-left: 0;
        flex-direction: row-reverse;
        .el-pagination__editor.el-input {
          width: 40px;
          margin-right: 5px;
        }
        .el-input__wrapper {
          padding: 0;
        }
      }
    }
  }
  :deep(.el-pagination__jump) {
    flex-direction: row-reverse;
    .el-pagination__goto {
      border: 1px solid black;
      color: white;
      background-color: rgb(23, 28, 73);
      width: 30px;
      height: 28px;
      border-radius: 5px;
      line-height: 30px;
      text-align: center;
    }
  }
}
</style>
